
<template>
<div>
  <div class="search-bar">
    <van-row>
      <van-col span="3" class="location-icon">
        <img src="../../assets/images/location.png" alt="location" />
      </van-col>
      <van-col span="16">
        <input type="text" class="search-input" />
      </van-col>
      <van-col span="5">
        <van-button size="mini">查找</van-button>
      </van-col>
    </van-row>
  </div>
  <div class="swiper-area">
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner, index) in bannerPictureArray" :key="index">
          <img v-lazy="banner.image" width="100%" >
        </van-swipe-item>
    </van-swipe>
  </div>
  <div class="type-bar">
    <div  v-for="(cate,index) in category" :key="index" >
      <img v-lazy="cate.image" width="90%" />
      <span>{{cate.mallCategoryName}}</span>
    </div>
  </div>
  <!-- AD banner -->
  <div class="ad-banner">
    <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
  </div>
</div>

</template>

<script>
import axios from 'axios';
import url from '@/API/service.config';

export default {
  data() {
    return {
      // locationIcon: require('../../assets/images/location.png'),
      bannerPictureArray: [],
      category: [],
      adBanner: [],
    };
  },
  created() {
    axios({
      url: url.getShoppingMallInfo,
      method: 'get',
    }).then(
      (res) => {
        /* eslint-disable */
        console.log(res);
        this.category = res.data.data.category;
        this.adBanner = res.data.data.advertesPicture;
        this.bannerPictureArray = res.data.data.slides
      },
    ).catch((err) => { 
      /* eslint-disable */
      alert(err); 
      },
    );
  },
};
</script>

<style>
  .search-bar {
    height: 2.2rem;
    background-color: #e5017d;
    line-height: 2.2rem;
    text-align: center;
  }
  .search-input{
    width:100%;
    height: 1.3rem;
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-bottom: 1px solid #fff !important ;
    background-color: #e5017d;
    color:#fff;
  }
  .location-icon{
    padding-top: .2rem;
    padding-left: .3rem;
  }
  .swiper-area {
    width: 20rem;
    clear: both;
  }
  .type-bar {
    display: flex;
    flex-wrap: nowrap;
    background-color: #fff;
    font-size: 14px;
    border-radius: 0.3rem;
    margin: 0 .3rem .3rem .3rem;
  }
  .type-bar div {
    padding: .3rem;
    font-size: 12px;
    text-align: center;
  }
</style>
